<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">study1</RouterLink>
        <div>
          <div>12月学习：</div>
          <div class="routerList">
            <RouterLink to="/studySomething_1">studySomething_1</RouterLink>
            <RouterLink to="/studySomething_2">studySomething_2</RouterLink>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <div class="border">
    <RouterView />
  </div>
</template>

<style scoped>


nav {
  width: 100%;
  font-size: 12px;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}
nav a.router-link-exact-active {
  /* color: var(--color-text); */
  color: hsla(160, 100%, 37%, 1);
}
nav a.router-link-exact-active:hover {
  background-color: transparent;
}
nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
  border: 0;
}

.routerList {
  display: flex;
  flex-direction: column;
}
.border{
  border: 1px solid #000;
}
</style>
